/* * accessibility-widget.css * Widget de Accesibilidad WCAG 2.1 AA * Municipalidad de Curridabat — Trámites Digitales * Tarea 1.1 / 1.2 */ /* ── Botón disparador ── */ #a11y-trigger { position: fixed; bottom: 24px; right: 24px; width: 52px; height: 52px; border-radius: 50%; background: #C45F00; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: 22px; z-index: 9999; box-shadow: 0 4px 12px rgba(0,0,0,0.25); transition: background 0.2s, transform 0.15s; } #a11y-trigger:hover { background: #A35000; transform: scale(1.05); } #a11y-trigger:focus-visible { outline: 3px solid #C45F00; outline-offset: 4px; } /* ── Panel ── */ #a11y-panel { position: fixed; bottom: 86px; right: 24px; width: 280px; background: #ffffff; border: 1px solid #e0e0e0; border-radius: 12px; padding: 1rem; z-index: 9998; display: none; flex-direction: column; gap: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); font-family: 'Verdana', sans-serif; } #a11y-panel.a11y-open { display: flex; } #a11y-panel-title { font-size: 14px; font-weight: 600; color: #425563; border-bottom: 1px solid #e0e0e0; padding-bottom: 8px; margin-bottom: 4px; } /* ── Filas ── */ .a11y-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .a11y-row label { font-size: 13px; color: #5E6E80; flex: 1; cursor: default; } /* ── Controles tamaño ── */ .a11y-size-controls { display: flex; gap: 6px; align-items: center; } .a11y-btn { width: 30px; height: 30px; border-radius: 6px; border: 1px solid #d0d0d0; background: #ffffff; cursor: pointer; font-size: 13px; font-weight: 600; color: #425563; display: flex; align-items: center; justify-content: center; transition: background 0.15s; } .a11y-btn:hover { background: #f4f4f4; } .a11y-btn:focus-visible { outline: 3px solid #C45F00; outline-offset: 2px; } .a11y-size-val { font-size: 12px; font-weight: 600; color: #425563; min-width: 36px; text-align: center; } /* ── Toggle switch ── */ .a11y-toggle { width: 44px; height: 24px; border-radius: 12px; border: 1px solid #d0d0d0; background: #e5e7eb; cursor: pointer; position: relative; transition: background 0.2s, border-color 0.2s; flex-shrink: 0; } .a11y-toggle.a11y-on { background: #C45F00; border-color: #C45F00; } .a11y-toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #ffffff; transition: left 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); } .a11y-toggle.a11y-on::after { left: 23px; } .a11y-toggle:focus-visible { outline: 3px solid #C45F00; outline-offset: 2px; } /* ── Botón restablecer ── */ #a11y-reset { width: 100%; padding: 7px; border-radius: 6px; border: 1px solid #d0d0d0; background: #f4f4f4; cursor: pointer; font-size: 12px; color: #5E6E80; font-family: 'Verdana', sans-serif; transition: background 0.15s; margin-top: 4px; } #a11y-reset:hover { background: #e9e9e9; } #a11y-reset:focus-visible { outline: 3px solid #C45F00; outline-offset: 2px; } /* ── Modos globales aplicados al ── */ /* Alto contraste */ body.a11y-high-contrast { filter: none !important; background: #000000 !important; color: #ffffff !important; } body.a11y-high-contrast .ui-widget, body.a11y-high-contrast .ui-widget-content, body.a11y-high-contrast .card, body.a11y-high-contrast .layout-content, body.a11y-high-contrast .layout-main { background: #000000 !important; color: #ffffff !important; border-color: #ffffff !important; } body.a11y-high-contrast a, body.a11y-high-contrast .ui-commandlink, body.a11y-high-contrast .ui-outputlink { color: #ffff00 !important; } body.a11y-high-contrast .ui-button, body.a11y-high-contrast .button-consulta { background: #ffffff !important; color: #000000 !important; border: 2px solid #ffffff !important; } /* Escala de grises */ body.a11y-grayscale { filter: grayscale(100%); } /* Subrayar links */ body.a11y-underline-links a, body.a11y-underline-links .ui-commandlink, body.a11y-underline-links .ui-outputlink { text-decoration: underline !important; text-decoration-thickness: 2px !important; } /* Cursor grande */ body.a11y-big-cursor, body.a11y-big-cursor * { cursor: url('data:image/svg+xml;utf8,') 4 4, auto !important; } /* Tamaño de texto */ body.a11y-text-80 { font-size: 80% !important; } body.a11y-text-90 { font-size: 90% !important; } body.a11y-text-100 { font-size: 100% !important; } body.a11y-text-110 { font-size: 110% !important; } body.a11y-text-120 { font-size: 120% !important; } body.a11y-text-130 { font-size: 130% !important; } body.a11y-text-140 { font-size: 140% !important; } body.a11y-text-150 { font-size: 150% !important; } /* ── Accesibilidad del propio widget ── */ .a11y-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }